import React from 'react';
import { useState } from "react"
import { useDispatch, useSelector } from 'react-redux';
import {increment, fetchHomeData} from '../store/modules/home'

const Home = function (){
    // const [counter,setCounter] = useState(100);
    // 1.从redux的store中读取数据
    const {counter} = useSelector((rootState)=>{
        return {
            counter: rootState.home.counter
        }
    })
    // 2.触发action
    const dispatch = useDispatch();
    function addCounter(){
        dispatch(increment(2));
    }
    // 下面异步数据共享
    function getHomeData(){
        dispatch(fetchHomeData());
    }
    return (
        <div style={{border:'1px solid green',margin:'10px'}}>
            <h2>Home</h2>
            <div>{counter}</div>
            <button onClick={addCounter}>+1</button>
            <button onClick={getHomeData}>getHomeData</button>
        </div>
    )
}

export default Home;